<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="/template/templateGeral.xhtml">
	<ui:define name="main">
	    
	    <div id="infoEstado">
	    	<h:form>
	    	<h:panelGrid columns="4" cellspacing="15">		
	    			    	
		    	<h:selectOneMenu value="#{estadoBean.estado}" converter="simpleEntityConverter" styleClass="formEstados">
		    		<f:selectItems value="#{estadoBean.estados}" var="e" itemLabel="#{e.nome}" itemValue="#{e}"></f:selectItems>
		    		<f:ajax render=":funcGraficos"></f:ajax>
		    	</h:selectOneMenu>
		    	
		    	<h1>x</h1>
		    	
		    	<h:selectOneMenu value="#{estadoBean.estadoComp}" converter="simpleEntityConverter" styleClass="formEstados">
		    		<f:selectItems value="#{estadoBean.estados}" var="e" itemLabel="#{e.nome}" itemValue="#{e}"></f:selectItems>
		    		<f:ajax render=":funcGraficos"></f:ajax>
		    	</h:selectOneMenu>
		    	
	    	</h:panelGrid>
	    	</h:form>
	    	
	    </div>
	    
	   <div id="graficos">	   
					
					<div id="gastoSubeixo" class="left grafico"></div>
					
					<div id="andamentoEmp" class="right grafico"></div>
					
			
					
					
					<div class="clear"></div>
					
		</div>
	    
	</ui:define>
	
	<ui:define name="scripts">
		
		<script>
		
		var gastoSubeixo = [];	
		var subeixos = [];	
		<ui:repeat var="m" value="#{estadoBean.estado.gastosSubeixo}">
	 		subeixos.push('#{m.subeixo}');
	 		gastoSubeixo.push(#{m.valor});
		</ui:repeat>

		var estagiosCat = [];
		var dataCat = [];
		<ui:repeat var="m" value="#{estadoBean.estado.estagioObras}">
	 		estagiosCat.push('#{m.estagio}');
	 		dataCat.push(#{m.quant});
		</ui:repeat>
		//EstadoComp
		var gastoSubeixoComp = [];	
		var subeixosComp = [];	
		<ui:repeat var="m" value="#{estadoBean.estadoComp.gastosSubeixo}">
	 		subeixosComp.push('#{m.subeixo}');
	 		gastoSubeixoComp.push(#{m.valor});
		</ui:repeat>

		var estagiosCatComp = [];
		var dataCatComp = [];
		<ui:repeat var="m" value="#{estadoBean.estadoComp.estagioObras}">
		estagiosCatComp.push('#{m.estagio}');
 		dataCatComp.push(#{m.quant});
		</ui:repeat>
		
		
		$(function () {
		    $('#gastoSubeixo').highcharts({
		        chart: {
		            type: 'column'
		        },
		        title: {
		            text: 'Gastos por subeixo'
		        },
		        xAxis: {
		            categories: subeixos,
		        },
		        yAxis: {
		            min: 0,
		            title: {
		                text: 'Gasto'
		            }
		        },
		        tooltip: {
		            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		                '<td style="padding:0"><b>R$ {point.y:.1f} </b></td></tr>',
		            footerFormat: '</table>',
		            shared: true,
		            useHTML: true
		        },
		        plotOptions: {
		            column: {
		                pointPadding: 0.2,
		                borderWidth: 0
		            }
		        },
		        series: [{
		        	name: '#{estadoBean.estado.nome}',
		            data: gastoSubeixo

		        }, {
		        	name: '#{estadoBean.estadoComp.nome}',
		            data: gastoSubeixoComp
		        }]
		    });
		});
		
		
		$(function () {
	        $('#andamentoEmp').highcharts({
	            chart: {
	                type: 'bar'
	            },
	            title: {
	                text: 'Andamento dos Empreendimentos'
	            },
	            xAxis: {
	                categories: estagiosCat,
	                title: {
	                    text: null
	                }
	            },
	            yAxis: {
	                min: 0,
	                title: {
	                    text: 'Quantidade',
	                    align: 'high'
	                },
	                labels: {
	                    overflow: 'justify'
	                }
	            },
	            tooltip: {
	                valueSuffix: ' millions'
	            },
	            plotOptions: {
	                bar: {
	                    dataLabels: {
	                        enabled: true
	                    }
	                }
	            },
	            legend: {
	                layout: 'vertical',
	                align: 'right',
	                verticalAlign: 'top',
	                x: -40,
	                y: 100,
	                floating: true,
	                borderWidth: 1,
	                backgroundColor: '#FFFFFF',
	                shadow: true
	            },
	            credits: {
	                enabled: false
	            },
	            series: [{
		            name: '#{estadoBean.estado.nome}',
		            data: dataCat

		        }, {
		        	name: '#{estadoBean.estadoComp.nome}',
		        	data: dataCatComp
		        }]
	        });
	    });		
		
		</script>
	
	</ui:define>
	
	
</ui:composition>
</html>